<template>
  <div class="app-container">
    
    <LastUpdate :time="time" :onClickUpdate="handleClickUpdate"/>

    <el-card >
      <el-table v-loading="tableLoading" :data="dataList" stripe border >
        <el-table-column label="参数" align="left" prop="param" sortable >
          <template slot-scope="{row}">
            <el-tag :color="textInfo[row.param].color">{{ row.param }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="描述" align="left" prop="text"  >
          <template slot-scope="{row}">
            {{ textInfo[row.param].text }}
          </template>
        </el-table-column>
        <el-table-column label="当前值" align="left" :show-overflow-tooltip="true" >
          <template slot-scope="{row}">
            {{ row.value }} {{ textInfo[row.param].unit }}
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>
<script>
  import {httpGet} from '@/api';

  export default {
    data() {
      return {
        time: '',
        tableLoading: true,
        dataList: [],
        // 列表通过 textInfo 渲染出颜色、描述和单位
        textInfo: {
          'jvm.memory.max': { color: '#e8f4ff', text: 'JVM 最大内存', unit: 'MB' },
          'jvm.memory.committed': { color: '#e8f4ff', text: 'JVM 可用内存', unit: 'MB' },
          'jvm.memory.used': { color: '#e8f4ff', text: 'JVM 已用内存', unit: 'MB' },
          'jvm.buffer.memory.used': { color: '#ffba004a', text: 'JVM 缓冲区已用内存', unit: 'MB' },
          'jvm.buffer.count': { color: '#ffba004a', text: '当前缓冲区数量', unit: '个' },
          'jvm.threads.daemon': { color: '#dcdfe6', text: 'JVM 守护线程数量', unit: '个' },
          'jvm.threads.live': { color: '#dcdfe6', text: 'JVM 当前活跃线程数量', unit: '个' },
          'jvm.threads.peak': { color: '#dcdfe6', text: 'JVM 峰值线程数量', unit: '个' },
          'jvm.classes.loaded': { color: '#ececbd', text: 'JVM 已加载 Class 数量', unit: '个' },
          'jvm.classes.unloaded': { color: '#ececbd', text: 'JVM 未加载 Class 数量', unit: '个' },
          'jvm.gc.memory.allocated': { color: '#f5cfd5', text: 'GC 时, 年轻代分配的内存空间', unit: 'MB' },
          'jvm.gc.memory.promoted': { color: '#f5cfd5', text: 'GC 时, 老年代分配的内存空间', unit: 'MB' },
          'jvm.gc.max.data.size': { color: '#f5cfd5', text: 'GC 时, 老年代的最大内存空间', unit: 'MB' },
          'jvm.gc.live.data.size': { color: '#f5cfd5', text: 'FullGC 时, 老年代的内存空间', unit: 'MB' },
          'jvm.gc.pause.count': { color: '#e6d8ef', text: '系统启动以来GC 次数', unit: '次' },
          'jvm.gc.pause.totalTime': { color: '#e6d8ef', text: '系统启动以来GC 总耗时', unit: '秒' }
        },
        // 当一条记录中需要取出多条数据的时候需要配置该字段
        moreInfo: {
          'jvm.gc.pause': ['.count', '.totalTime']
        }
      }
    },
    mounted() {
      this.loadTomcatInfo()
    },
    methods: {

      handleClickUpdate() {
        this.loadTomcatInfo()
      },

      loadTomcatInfo() {
        this.tableLoading = true
        this.time = this.$formatDate(new Date(), 'yyyy-MM-dd hh:mm:ss')
        Promise.all([
          httpGet('actuator/metrics/jvm.memory.max'),
          httpGet('actuator/metrics/jvm.memory.committed'),
          httpGet('actuator/metrics/jvm.memory.used'),
          httpGet('actuator/metrics/jvm.buffer.memory.used'),
          httpGet('actuator/metrics/jvm.buffer.count'),
          httpGet('actuator/metrics/jvm.threads.daemon'),
          httpGet('actuator/metrics/jvm.threads.live'),
          httpGet('actuator/metrics/jvm.threads.peak'),
          httpGet('actuator/metrics/jvm.classes.loaded'),
          httpGet('actuator/metrics/jvm.classes.unloaded'),
          httpGet('actuator/metrics/jvm.gc.memory.allocated'),
          httpGet('actuator/metrics/jvm.gc.memory.promoted'),
          httpGet('actuator/metrics/jvm.gc.max.data.size'),
          httpGet('actuator/metrics/jvm.gc.live.data.size'),
          httpGet('actuator/metrics/jvm.gc.pause')
        ]).then((res) => {

          let info = []
          res.forEach((value, id) => {
            let more = this.moreInfo[value.name]
            if (!(more instanceof Array)) {
              more = ['']
            }
            more.forEach((item, idx) => {
              let param = value.name + item
              let val = value.measurements[idx].value

              if (param === 'jvm.memory.max'
                || param === 'jvm.memory.committed'
                || param === 'jvm.memory.used'
                || param === 'jvm.buffer.memory.used'
                || param === 'jvm.gc.memory.allocated'
                || param === 'jvm.gc.memory.promoted'
                || param === 'jvm.gc.max.data.size'
                || param === 'jvm.gc.live.data.size'
              ) {
                val = this.convert(val, Number)
              }
              info.push({ id: param + id, param, text: 'false value', value: val })
            })
          })
          this.dataList = info


        }).catch((e) => {
          console.error(e)
          this.$message.error('获取JVM信息失败')
        }).finally(() => {
          this.loading = false
          this.tableLoading = false
        })
      },

      convert(value, type) {
        if (type === Number) {
          return Number(value / 1048576).toFixed(3)
        } else if (type === Date) {
          return this.$formatDate(value * 1000, 'yyyy-MM-dd hh:mm:ss')
        }
        return value
      },
    }
  }
</script>
<style></style>
